<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [defaultHref]="'/tabs/myCredit'"></ion-back-button>
    </ion-buttons>
    <ion-title>STATISTICS</ion-title>
    <div class="trans_title">
      <a [routerLink]="[ '/tabs/myCredit/transaction']">
       <!--  <ion-icon name="list-outline" size="large"></ion-icon> -->
       <svg class="icon" aria-hidden="true">
        <use xlink:href="#iconlist"></use>
      </svg>
      </a>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>
      <div>
        <ion-grid class="padding_clean">
          <ion-row>
            <ion-col size-sm>
              <ion-select interface="popover" class="i_select" name="dateType" value="2">
                <ion-select-option *ngFor="let item of dateTypes" value="{{item.num}}">{{item.type}}</ion-select-option>
              </ion-select>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
      <div>
        <ion-grid>
          <ion-row>
            <ion-col>
              <div #monthScroll class="month-scroll">
                <ul class="clean_fix" >
                  <li *ngFor="let item of months" (tap)="selecedLi($event,item)" id="li_{{item.value}}" [ngClass]="{'selected_li': item.selected}">
                    {{item.name}}
                  </li>
                </ul>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </ion-list-header>
    <ion-item-group>
      <ion-item lines="full">
        <ion-label slot="end" class="ion-text-right">
          <div>
            <p class="title_font">
              <span>
                Balance
              </span>
              <span>
                ${{balance}}
              </span>
            </p>
          </div>
        </ion-label>
      </ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item lines="none">
        <ion-label class="ion-text-center">
          <ion-text>
            Daily Expenses
          </ion-text>
        </ion-label>
      </ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item lines="none" class="flex_box">
        <div #chart style="height: 30vh; float:left;">
        </div>
      </ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item lines="none">
        <ion-label class="ion-text-center">
          <ion-text>
            Expenses by Category
          </ion-text>
        </ion-label>
      </ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item lines="none"  class="flex_box">
       <div #picChart style="width: 200px;height: 30vh; float:left;">

       </div>
      </ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>